<!-- eslint-disable no-unused-expressions -->
<template>
  <div class='container'>
    <!-- 顶部按钮部分 -->
    <div class="options">
      <!-- 左侧操作部分 -->
      <div class="optionsLeft">
        <span class="className">学科名称：</span>
        <el-input size="mini" v-model="subjectName"></el-input>
        <el-button size="mini" @click="reset">清除</el-button>
        <el-button type="primary" size="mini" @click="searchSubjectName">搜索</el-button>
      </div>
      <!-- 右侧操作部分 -->
      <div class="optionsRight">
        <el-button type="success" size="mini" @click="addSubjectDialog">新增学科</el-button>
      </div>
    </div>
    <!-- 中间数据条数部分 -->
    <div class="numberData">
      <i class="el-icon-warning"></i>
      <span>数据一共{{ counts }}条</span>
    </div>
    <!-- 下方表格部分 -->
    <div class="table">
      <el-table :data="subjectList" highlight-current-row :header-cell-style="{
        background: '#fafafa', color: '#909399'
      }">
        <el-table-column type="index" label="序号" width="50" style="backgroundColor: #1f1;">
        </el-table-column>
        <el-table-column property="subjectName" label="学科名称">
        </el-table-column>
        <el-table-column property="username" label="创建者">
        </el-table-column>
        <el-table-column property="addDate" label="创建时间">
          <template v-slot="{ row }">
            {{ row.addDate.substring(0, row.addDate.indexOf('.')).replace('T', ' ')
            }}
          </template>
        </el-table-column>
        <el-table-column property="isFrontDisplay" label="前台是否显示">
          <template v-slot="{ row }">
            {{ row.isFrontDisplay === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column property="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column property="tags" label="标签">
        </el-table-column>
        <el-table-column property="totals" label="题目数量">
        </el-table-column>
        <el-table-column property="address" label="操作"  width="300">
          <template v-slot="{ row }">
            <el-button type="text" @click="$router.push(`directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
            <el-button type="text" @click="$router.push(`tags?id=${row.id}&name=${row.subjectName}`)"  >学科标签</el-button>
            <el-button type="text" @click="editSubject(row)">修改</el-button>
            <el-button type="text"  @click="deleteSubject(row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <!-- 表格下方分页器 -->
    <div class="pagination">
      <el-pagination background layout="prev, pager,next,sizes,jumper" :total="counts" :page-size="pageInfo.pagesize"
        :page-sizes="[5, 10, 15, 20]" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
 <!-- 添加弹框 -->
 <subjectsAdd :addDialogVisible.sync="addDialogVisible"  @done="getSubjectList"></subjectsAdd>
 <!-- 编辑弹框 -->
 <subjectsEditVue :editDialogVisible.sync="editDialogVisible" :editData="editData" @done="getSubjectList"></subjectsEditVue>
  </div>
</template>

<script>
// 导入获取学科列表数据接口方法
import { list, remove, detail } from '@/api/hmmm/subjects'
// 导入添加学科弹框
import subjectsAdd from '../components/subjects-add.vue'
// 引入编辑学科弹框
import subjectsEditVue from '../components/subjects-edit.vue'
export default {
  components: {
    subjectsAdd,
    subjectsEditVue
  },
  data () {
    return {
      // 学科列表数据
      subjectList: [],
      // 总条数
      counts: null,
      // 分页详情
      pageInfo: {
        // 当前页数
        page: 1,
        // 总页数
        pages: 2,
        // 每页条数
        pagesize: 10
      },
      // 控制添加弹框显示隐藏
      addDialogVisible: false,
      // 控制编辑弹框显示隐藏
      editDialogVisible: false,
      // 编辑的对象
      editData: {
        subjectName: '',
        isFrontDisplay: null
      },
      // 用户输入的学科名称
      subjectName: ''

    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 获取学科列表信息
    getSubjectList () {
      list({
        page: this.pageInfo.page,
        pagesize: this.pageInfo.pagesize
      })
        .then((res) => {
          this.subjectList = res.data.items
          this.counts = res.data.counts
        })
    },
    // 分页器点击页数的事件
    handleCurrentChange (val) {
      // 此刻的val是点击的第几页，将点击的页数传递给本地的页数
      this.pageInfo.page = val
      // 在调用获取学科列表的方法，渲染页面
      this.getSubjectList()
    },
    // 分页器每页显示几条数据的事件
    handleSizeChange (val) {
      // 此时的val是每页显示的条数，把这个每页条数赋值给本地的每页条数
      this.pageInfo.pagesize = val
      // 重新调用获取学科列表的方法
      this.getSubjectList()
    },

    // 删除学科
    deleteSubject (row) {
      // 确认弹框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //  点击确认之后，调用删除的接口，将本行数据传进去，
        await remove(row)
        // 提示用户删除失败
        this.$message.success('删除成功')
        // 调用最新的接口数据
        this.getSubjectList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加学科弹框
    addSubjectDialog () {
      this.addDialogVisible = true
    },
    // 编辑学科
    // editSubject (row) {
    //   detail(row)
    //     .then((res) => {
    //       console.log(row)
    //       this.editDialogVisible = true
    //       this.editData = res.data
    //       if (row.isFrontDisplay === 1) {
    //         this.editData.isFrontDisplay = true
    //       }
    //       if (row.isFrontDisplay === 0) {
    //         this.editData.isFrontDisplay = false
    //       }
    //       console.log(this.editData)
    //     })
    // },
    editSubject (row) {
      detail(row)
        .then((res) => {
          this.editData = res.data
          this.editDialogVisible = true
        })
        .then(() => {
          if (row.isFrontDisplay === 1) {
            this.editData.isFrontDisplay = true
          } else {
            this.editData.isFrontDisplay = false
          }
          console.log(this.editData)
        })
    },
    // 点击清除
    reset () {
      this.subjectName = ''
      this.getSubjectList()
    },
    // 根据学科名称搜索
    searchSubjectName () {
      // 根据输入的value,
      this.subjectList = this.subjectList.filter(item => {
        return item.subjectName === this.subjectName
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 20px 10px;
  background-color: #fff;
  padding: 20px;

  .options {
    width: 100%;
    height: 51px;
    display: flex;

    .optionsLeft {
      width: 75%;
      display: flex;

      .el-input {
        width: 200px;
        height: 32px;
        margin-right: 10px;
      }

      .el-button {
        width: 56px;
        height: 32px;
      }

      .className {
        font-size: 12px;
        width: 80px;
        line-height: 32px;

      }
    }

    .optionsRight {
      display: flex;
      flex: 1;
      justify-content: flex-end;

      .el-button {

        width: 97px;
        height: 32px;
      }
    }
  }

  .numberData {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 20px;
    background-color: #f4f4f5;
    color: #909399;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    opacity: 1;
    display: flex;
    align-items: center;
    transition: opacity .2s;

    i {
      width: 16px;
      height: 16px;
    }

    span {
      margin-left: 5px;
      font-size: 12px;
    }
  }

  .table {
    margin-bottom: 20px;
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    .el-pagination {
      ::v-deep .el-pagination__jump {
        margin-left: 0;
      }
    }
  }
}
</style>
